import React, { forwardRef, useRef, useEffect } from 'react';
import './index.scss';
import * as echarts from "echarts";

export interface TrafficCapacityDataPoint {
  time: string;
  value: number;
}

export interface TrafficCapacitySeries {
  name: string;
  color: string;
  data: TrafficCapacityDataPoint[];
  lineWidth?: number;
  showDots?: boolean;
}

export interface TrafficCapacityChartProps {
  width?: string | number;
  height?: string | number;
  series?: TrafficCapacitySeries[];
  backgroundColor?: string;
  gridColor?: string;
  textColor?: string;
  showGrid?: boolean;
  showLegend?: boolean;
  legendPosition?: 'top' | 'bottom' | 'left' | 'right';
  xAxisLabel?: string;
  yAxisLabel?: string;
  minY?: number;
  maxY?: number;
  stepY?: number;
  formatValue?: (value: number) => string;
  formatTime?: (time: string) => string;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: (dataPoint: TrafficCapacityDataPoint, seriesIndex: number) => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const TrafficCapacityChart = forwardRef<HTMLDivElement, TrafficCapacityChartProps>(function TrafficCapacityChart({
  width = 462,
  height = 318,
  series = [
    {
      name: '铁路',
      color: '#FF6B6B',
      data: [
        { time: '06:00', value: 450000 },
        { time: '08:00', value: 580000 },
        { time: '10:00', value: 500000 },
        { time: '12:00', value: 520000 },
        { time: '14:00', value: 580000 },
        { time: '16:00', value: 650000 },
        { time: '18:00', value: 620000 },
        { time: '20:00', value: 500000 },
        { time: '22:00', value: 420000 }
      ]
    },
    {
      name: '地铁',
      color: '#4ECDC4',
      data: [
        { time: '06:00', value: 280000 },
        { time: '08:00', value: 400000 },
        { time: '10:00', value: 340000 },
        { time: '12:00', value: 360000 },
        { time: '14:00', value: 410000 },
        { time: '16:00', value: 450000 },
        { time: '18:00', value: 420000 },
        { time: '20:00', value: 340000 },
        { time: '22:00', value: 280000 }
      ]
    },
    {
      name: '公交',
      color: '#45B7D1',
      data: [
        { time: '06:00', value: 180000 },
        { time: '08:00', value: 300000 },
        { time: '10:00', value: 240000 },
        { time: '12:00', value: 260000 },
        { time: '14:00', value: 310000 },
        { time: '16:00', value: 350000 },
        { time: '18:00', value: 320000 },
        { time: '20:00', value: 240000 },
        { time: '22:00', value: 180000 }
      ]
    },
    {
      name: '出租车',
      color: '#F7DC6F',
      data: [
        { time: '06:00', value: 120000 },
        { time: '08:00', value: 220000 },
        { time: '10:00', value: 170000 },
        { time: '12:00', value: 190000 },
        { time: '14:00', value: 230000 },
        { time: '16:00', value: 270000 },
        { time: '18:00', value: 240000 },
        { time: '20:00', value: 180000 },
        { time: '22:00', value: 140000 }
      ]
    },
    {
      name: '网约车',
      color: '#9B59B6',
      data: [
        { time: '06:00', value: 80000 },
        { time: '08:00', value: 180000 },
        { time: '10:00', value: 130000 },
        { time: '12:00', value: 150000 },
        { time: '14:00', value: 190000 },
        { time: '16:00', value: 230000 },
        { time: '18:00', value: 200000 },
        { time: '20:00', value: 150000 },
        { time: '22:00', value: 110000 }
      ]
    }
  ],
  backgroundColor = 'rgba(15, 35, 65, 0.95)',
  gridColor = 'rgba(255, 255, 255, 0.15)',
  textColor = 'rgba(255, 255, 255, 0.9)',
  showGrid = true,
  showLegend = true,
  legendPosition = 'top',
  xAxisLabel = '',
  yAxisLabel = '',
  minY = 0,
  maxY = 700000,
  stepY = 100000,
  formatValue = (value: number) => (value / 10000).toFixed(0) + '万',
  formatTime = (time: string) => time,
  theme = 'dark',
  style = {},
  className = '',
  onClick,
  __designMode,
  componentId,
  _componentName,
  forwardRef: forwardRefProp,
  ...otherProps
}, ref) {
  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    backgroundColor,
    ...style
  };
  const chartRef = useRef<HTMLDivElement>(null);
  const myChartData = {
    vehicleFlow: [120, 132, 101, 134, 90, 230],
    passengerFlow: [220, 182, 191, 234, 290, 330],
  }
  useEffect(() => {
    if (chartRef.current && myChartData) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        grid: {
          left: '13%',
          right: '5%',
          top: '25%',
          bottom: '10%',
        },
        legend: {
          top: '4%', // 顶部位置
          right: '5%', // 右侧位置
          bottom: '5%',
          icon: 'roundRect',
          itemHeight: 2,
          itemWidth: 8,
          data: ['铁路', '地铁', '公交', '出租车', '长途', '网约车'],
          textStyle: {
            fontSize: 12,
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#FFFFFF4C',
            },
          },
          nameTextStyle: {
            fontSize: 10,
          },
          axisLabel: {
            interval: 1
          },
          data: ['6.4', '6.5', '6.6', '6.7', '6.8', '6.9', '6.10', '6.11'],

        },
        yAxis: {
          type: 'value',
          splitNumber: 2,
          nameTextStyle: {
            align: 'right'
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'rgba(255,255,255,0.3)',
            },
          },
          splitLine: {
            showMinLine: false,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.1)',
            },
          }
        },
        series: [
          {
            name: '铁路',
            type: 'line',
            smooth: true,
            symbol: 'none',
            // markArea,markLine只需要在第一条数据中设置
            markArea: {
              label: {
                backgroundColor: 'rgba(6,135,246, 1)',
                color: '#ffffff',
                padding: [5, 10],
                borderRadius: 4,
                fontSize: 14
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(6,135,246, 0)'}, //  (起点)
                  {offset: 0.98, color: 'rgb(6,135,246, 1)'}, // (中点)
                  {offset: 0.98, color: 'rgba(88, 255, 246, 1)'}, // (中点)
                  {offset: 1, color: 'rgba(88, 255, 246, 1)'} // (终点)
                ], false),
                borderWidth: 2,
                borderType: 'solid',
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(0, 255, 241, 0)'}, //  (起点)
                  {offset: 0.98, color: 'rgb(6,135,246)'}, // (中点)
                  {offset: 0.98, color: 'rgba(88, 255, 246, 1)'}, // (中点)
                  {offset: 1, color: 'rgba(88, 255, 246, 1)'} // (终点)
                ], false),
              },
              // 以第几条数据为中心，取前后为xAxis的值，从0开始
              data: [
                [
                  { name: '今天', xAxis: 4 }, { xAxis: 6 }
                ]
              ]
            },
            markLine: {
              symbol: ['none'],
              label: { show: false },
              lineStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(255,255,255, 0.1)'}, //  (起点)
                  {offset: 0.98, color: 'rgba(255,255,255, 0.7)'}, // (终点)
                  {offset: 0.98, color: 'rgba(88, 255, 246, 1)'}, // (中点)
                  {offset: 1, color: 'rgba(88, 255, 246, 1)'} // (终点)
                ], false),
              },
              // 以第几条数据为中心，从0开始
              data: [{ xAxis: 5 }]
            },
            // 不在图表上显示data为空数组，否则影响图例显示
            data: [120000, 130000, 140000, 150000, 160000, 180000, null, null],
          },
          // 实现中心线前实线，后虚线，以相同name为key，分为两个对象，
          // 前一个对象data中的数据中心点后的数据全设为null
          // 后一个对象data中的数据中心点前的数据全设为null，中心点数据都需要
          {
            name: '铁路',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: [null, null, null, null, null, 180000, 240000, 230000],
            lineStyle: {
              type: 'dashed',  // 虚线
            },
          },
          {
            name: '地铁',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: [20000, 30000, 40000, 50000, 60000, 70000, null, null],
          },
          {
            name: '地铁',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: [null, null, null, null, null, 70000, 100000, 90000],
            lineStyle: {
              type: 'dashed',  // 虚线
            },
          },
          {
            name: '公交',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: [],
          },
          {
            name: '出租车',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: [],
          },
          {
            name: '长途',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: [],
          },
          {
            name: '网约车',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: [],
          }
        ],
      };
      chartInstance.setOption(option);
      window.addEventListener('resize', () => chartInstance.resize());
      return () => {
        chartInstance.dispose();
      };
    }
  }, [myChartData]);

  return (
    <div
      ref={ref}
      className={`hzdz-traffic-capacity-chart ${theme} ${className}`.trim()}
      style={componentStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="chart-area">
        <div className="chart-container" ref={chartRef} style={{ width: '100%', height: '100%', background: 'rgba(255,255,255,0.1)'}}>
        </div>
      </div>
    </div>
  );
});

TrafficCapacityChart.displayName = 'TrafficCapacityChart';

export default TrafficCapacityChart;
